<template>
    <div class="container">
        <div class="right-container">
            <ul class="gantt-messages">
                <li class="gantt-message" v-for="(message, index) in messages" v-bind:key="index">{{message}}</li>
            </ul>
        </div>
        <gantt class="left-container" :tasks="tasks" @task-updated="logTaskUpdate" @link-updated="logLinkUpdate"></gantt>
    </div>
</template>

<script>
    import gantt from "./gantt";

    export default {
        name: 'app',
        components: {gantt},
        data () {
            return {
                tasks: {
                    data: [
                        {id: 1, text: 'Task #1', start_date: '2020-01-17-00-00-00', duration: 3, progress: 0.6},
                        {id: 2, text: 'Task #2', start_date: '2020-01-17-01-00-00', duration: 3, progress: 0.4},
                        {id: 3, text: 'Task #3', start_date: '2020-01-17-02-00-00', duration: 3, progress: 0.4},
                        {id: 4, text: 'Task #4', start_date: '2020-01-17-03-00-00', duration: 3, progress: 0.4}
                    ],
                    links: [
                        {id: 1, source: 1, target: 2, type: '0'}
                    ]
                },
            }
        },
        methods: {
            addMessage (message) {
                this.messages.unshift(message)
                if (this.messages.length > 40) {
                    this.messages.pop()
                }
            },

            logTaskUpdate (id, mode, task) {
                let text = (task && task.text ? ` (${task.text})`: '')
                let message = `Task ${mode}: ${id} ${text}`
                this.addMessage(message)
            },

            logLinkUpdate (id, mode, link) {
                let message = `Link ${mode}: ${id}`
                if (link) {
                    message += ` ( source: ${link.source}, target: ${link.target} )`
                }
                this.addMessage(message)
            }
        }
    }
</script>

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .container {
        height: 100%;
        width: 100%;
    }
    .left-container {
        overflow: hidden;
        position: relative;
        height: 100%;
    }

</style>
